<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>年龄段分布统计图</title>
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script src="$request.getContextPath()/resources/highcharts/highcharts.js"></script>
<script src="$request.getContextPath()/resources/highcharts/highcharts-3d.js"></script>
<script src="$request.getContextPath()/resources/highcharts/modules/exporting.js"></script>
<style type="text/css">
body,
.container-fluid,
.container-fluid #ageContainer{
   width: 100%;
   height: 100%;
   position: absolute;
   padding:0px;
   margin:0px;
}
.highcharts-credits{
   visibility: hidden;
}
</style>
<script type="text/javascript">
$(function () {
    $('#ageContainer').highcharts({
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: '用户年龄分布统计图'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: ["40后","50后","60后","70后","80后","90后","00后","10后"]
        },
        yAxis: {
            title: {
                text: "用户人数"
            }
        },
        series: [{
            name: '年代',
            data: [8, 3, 0, 4, 0, 5, 1, 4]
        }]
    });
});
</script>
</head>
<body>
<div class="container-fluid">
	<div id="ageContainer"></div>
</div>
</body>
</html>